<template>
  <el-row class="about">
    <el-col :span="12" :offset="6">
      <ul>
        <li v-for="(item, index) in aboutList" :key="index">
          <el-divider v-if="index !== 0" direction="vertical"></el-divider>
          <nuxt-link :to="item.url">{{ item.title }}</nuxt-link
          >:to
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      aboutList: [
        {
          title: '关于信息青年',
          url: '/'
        },
        {
          title: '联系我们',
          url: '/'
        },
        {
          title: '加入我们',
          url: '/'
        },
        {
          title: '团队介绍',
          url: '/'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.about {
  background-color: #333;
  ul {
    display: flex;
    justify-content: center;
    height: 43px;
    li {
      height: 100%;
      line-height: 43px;
      /deep/ .el-divider--vertical {
        margin: 0 10px;
      }
      a {
        color: #ccc;
        text-decoration: none;
        &:hover {
          color: $--color-primary;
        }
      }
    }
  }
}
</style>
